<template>
  <div class="barracksIndex">
    <div class="barracksIndex--bg">
      <div class="barracksIndex--bg__plane"></div>
    </div>
    <div class="barracksIndex--left">
      <barracksLeftIndex></barracksLeftIndex>
    </div>
    <div class="barracksIndex--center">
      <barracksCenterIndex></barracksCenterIndex>
    </div>
    <div class="barracksIndex--right">
      <barracksRightIndex></barracksRightIndex>
    </div>
  </div>
</template>

<script setup>
// import barracksLeftIndex from '@/views/armyScreen/barracks/left/barracksLeftIndex.vue'
import barracksLeftIndex from '@/views/armyScreen/barracks/leftNew/barracksLeftIndexNew.vue'
import barracksCenterIndex from '@/views/armyScreen/barracks/center/barracksCenterIndex.vue'
// import barracksRightIndex from '@/views/armyScreen/barracks/right/barracksRightIndex.vue'
import barracksRightIndex from '@/views/armyScreen/barracks/rightNew/barracksRightIndexNew.vue'
</script>

<style lang="scss" scoped>
.barracksIndex {
  position: relative;

  &--left {
    position: absolute;
    left: 36px;
    top: 0px;
  }

  &--center {
    position: absolute;
    left: 520px;
    top: 0px;
  }

  &--right {
    position: absolute;
    right: 36px;
    top: 0px;
  }

  &--bg{
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    &__plane{
      width: 570px;
      height: 241px;
      background-image: url('@/assets/images/armyScreen/bg飞机运动@1x.png');
      background-size: cover;

      pointer-events: none;
      position: absolute;
      left: 100px;
      top: 288px;
      animation:planefly 3.5s;
    }
  }
}
</style>
<style>
@keyframes planefly
{
  0% {
    left: 10px;
    top: 688px;
  }
  20% {
    left: 481px;
    top: 605px;
  }
  40% {
    left: 746px;
    top: 470px;
  }
  60% {
    left: 1173px;
    top: 342px;
  }
  80% {
    left: 1407px;
    top: 196px;
  }
  100% {
    left: 1909px;
    top: 18px;
  }
}
</style>
